<template>
    <div class="person-view">
      <!-- 导航栏（可选） -->
      <nav-bar :activeComponent="activeComponent"></nav-bar>
      
      <!-- 个人中心主体区域 -->
      <div class="person-container">
        <!-- 左侧菜单 -->
        <div class="sidebar">
          <ul>
            <li :class="{ active: activeComponent === 'info' }" @click="activeComponent = 'info'">
              个人信息
            </li>
            <li :class="{ active: activeComponent === 'posts' }" @click="activeComponent = 'posts'">
              我的帖子
            </li>
            <li :class="{ active: activeComponent === 'favorites' }" @click="activeComponent = 'favorites'">
              我的收藏
            </li>
            <li :class="{ active: activeComponent === 'settings' }" @click="activeComponent = 'settings'">
              账号设置
            </li>
          </ul>
        </div>
        
        <!-- 右侧内容区 -->
        <div class="content">
          <!-- 个人信息 -->
          <div v-if="activeComponent === 'info'">
            <div class="personal-info">
              <!-- ======== 顶部信息区 ======== -->
              <div class="profile-header">
                <!-- 头像 -->
                <img class="avatar" :src="user.avatar" alt="头像" />
      
                <!-- 用户信息（名称、等级、经验条、硬币） -->
                <div class="info">
                  <div class="name-level">
                    <h2>{{ user.name }}</h2>
                    <span class="level">LV{{ user.level }}</span>
                    <div class="actions">
                      <button @click="showEditForm = true">编辑个人信息</button>
                    </div>
                  </div>
      
                  <!-- 经验条与硬币显示 -->
                  <div class="exp-bar">
                    <div class="exp-text">
                      <span>经验值: {{ user.exp }}/{{ user.nextExp }}</span>
                      <span class="coin">硬币: {{ user.coin }}</span>
                    </div>
                    <div class="bar-container">
                      <div class="bar-fill" :style="{ width: expPercent + '%' }"></div>
                    </div>
                   
            
                  </div>
                </div>
              </div>
      
          
              <div class="divider"></div>
              <!-- ======== 每日奖励 ======== -->
              <div class="daily-rewards">
                <div class="section-header">
                  <i class="fas fa-calendar-check header-icon"></i>
                  <span class="header-title">每日奖励</span>
                </div>
                <ul>
                  <li v-for="(task, index) in dailyTasks" :key="index">
                    <i :class="task.icon"></i>
                    <span>{{ task.title }}</span>
                    <span class="exp-gain">+{{ task.exp }} EXP</span>
                  </li>
                </ul>
              </div>
              <div class="divider"></div>
              <!-- ======== 成就勋章 ======== -->
              <div class="achievements">
                <div class="section-header">
                  <i class="fas fa-medal header-icon"></i>
                  <span class="header-title">成就勋章</span>
                </div>
                <ul>
                  <li v-for="(medal, index) in medals" :key="index">
                    <img :src="medal.icon" :alt="medal.name" />
                    <span>{{ medal.name }}</span>
                  </li>
                </ul>
              </div>
              <div class="divider"></div>
              <!-- ======== 账号安全 ======== -->
              <div class="account-security">
                <div class="section-header">
                  <i class="fas fa-lock header-icon"></i>
                  <span class="header-title">账号安全</span>
                </div>
                <div class="account-cards">
                  <!-- 我的手机卡片 -->
                  <el-card class="account-card" shadow="hover" @click="handleEdit('phone')">
                    <div class="card-content">
                      <i class="fas fa-phone-alt card-icon"></i>
                      <div class="card-info">
                        <div class="card-title">我的手机</div>
                        <div class="card-value">{{ user.person.phone }}</div>
                      </div>
                    </div>
                  </el-card>
            
                  <!-- 绑定邮箱卡片 -->
                  <el-card class="account-card" shadow="hover" @click="handleEdit('email')">
                    <div class="card-content">
                      <i class="fas fa-envelope card-icon"></i>
                      <div class="card-info">
                        <div class="card-title">绑定邮箱</div>
                        <div class="card-value">{{ user.person.email }}</div>
                      </div>
                    </div>
                  </el-card>
            
                  <!-- 更改密码卡片 -->
                  <el-card class="account-card" shadow="hover" @click="handleEdit('password')">
                    <div class="card-content">
                      <i class="fas fa-key card-icon"></i>
                      <div class="card-info">
                        <div class="card-title">更改密码</div>
                        <div class="card-value">点击修改</div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 我的帖子 -->
          <div v-if="activeComponent === 'posts'">
            <div class="demo-collapse">
              <el-collapse v-model="activeName" accordion>
                <!-- 使用 index 来显示顺序编号 -->
                <el-collapse-item v-for="(order, index) in tableData" :key="index + 1" :name="index + 1">
                  <template #title>
                    <div class="order-title">
                      {{ index + 1 }}    
                      <el-tag :type="getTagType(order.state)" class="state-tag">{{ order.state }}</el-tag>
                      <el-icon class="header-icon no-margin"><info-filled /></el-icon>
                      <el-button type="text" @click.stop="">
                        <el-icon><Edit/></el-icon>
                      </el-button>
                      <!-- 这里添加删除按钮并包裹在确认弹窗中 -->
                      <el-popconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="#626AEF"
                        title="确定要删除此项吗?"
                        @confirm="confirmDelete(order.id)"
                        @cancel="cancelDelete"
                      >  <template #reference> <el-button type="text" @click.stop>
                          <el-icon><Delete/></el-icon> <!-- 删除图标 -->
                        </el-button></template>
                       
                      </el-popconfirm>
                     
                    </div>
                  </template>
                  <!-- 显示订单的详细信息 -->
                  <el-descriptions title="申报详情" :column="2" border>
                    <el-descriptions-item label="地址">{{ order.adress }}</el-descriptions-item>
                    <el-descriptions-item label="创建时间">{{ formatDate(order.createTime) }}</el-descriptions-item>
                    <el-descriptions-item label="楼层">{{ order.floor }}</el-descriptions-item>
                    <el-descriptions-item label="ID">{{ order.id }}</el-descriptions-item>
                    <el-descriptions-item label="图片路径">
                      <img :src="order.imagePath" alt="图片" style="max-width: 100px;">
                    </el-descriptions-item>
                    <el-descriptions-item label="户型">{{ order.layout }}</el-descriptions-item>
                    <el-descriptions-item label="状态">{{ order.state }}</el-descriptions-item>
                    <el-descriptions-item label="更新时间">{{ formatDate(order.updateTime) }}</el-descriptions-item>
                    <el-descriptions-item label="期望金额">{{ order.wantMoney }}</el-descriptions-item>
                  </el-descriptions>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
          
          <!-- 我的收藏 -->
          <div v-if="activeComponent === 'favorites'">
            <h2>我的收藏</h2>
            <ul>
              <li v-for="fav in favorites" :key="fav.id" class="fav-item">
                {{ fav.title }}
              </li>\
            </ul>
          </div>
          
          <!-- 账号设置 -->
          <div v-if="activeComponent === 'settings'" class="account-settings">
            <h2>个人信息修改</h2>
            <el-form :model="editUser" label-width="auto" style="max-width: 600px">
              <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="/api/user/upload/image" name="imagefile" :headers="headers"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <div class="avatar-frame">
                    <img v-if="editUser.avatar" :src="editUser.avatar" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus/>
                    </el-icon>
                </div>
            </el-upload>
              </el-form-item>
        
              <!-- 账号（不可修改） -->
              <el-form-item label="账号">
                <el-input v-model="editUser.name" disabled></el-input>
              </el-form-item>
            
              <!-- 绑定邮箱 -->
              <el-form-item label="绑定邮箱">
                <el-input v-model="editUser.email" placeholder="请输入新的邮箱"></el-input>
              </el-form-item>
        
              <!-- 手机号 -->
              <el-form-item label="手机号">
                <el-input v-model="editUser.phone" placeholder="请输入新的手机号"></el-input>
              </el-form-item>
        
              <!-- 个人简介 -->
              <el-form-item label="个人简介">
                <el-input v-model="editUser.bio" type="textarea" placeholder="填写你的个人简介"></el-input>
              </el-form-item>
        
              <!-- 密码修改 -->
              <el-form-item label="旧密码">
                <el-input v-model="editUser.passwordOld" type="password" placeholder="输入旧密码"></el-input>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="editUser.passwordNew" type="password" placeholder="输入新密码"></el-input>
              </el-form-item>
        
              <!-- 生日设置 -->
              <el-form-item label="生日">
                <el-date-picker v-model="editUser.birthday" type="date" placeholder="选择生日"></el-date-picker>
              </el-form-item>
        
              <!-- 个性签名 -->
              <el-form-item label="个性签名">
                <el-input v-model="editUser.signature" type="textarea" placeholder="填写你的个性签名"></el-input>
              </el-form-item>
        
              <!-- 性别选择 -->
              <el-form-item label="性别">
                <el-radio-group v-model="editUser.gender">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                  <el-radio label="保密">保密</el-radio>
                </el-radio-group>
              </el-form-item>
        
              <!-- 保存按钮 -->
              <el-form-item>
                <el-button type="primary" @click="saveChanges">保存修改</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import NavBar from "@/components/NavBar.vue";
  import Info from "@/components/Person/Info.vue";
  import { ref, reactive, computed ,onMounted} from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import { findchaiByName ,deleteOrderById} from '@/api/user'
  import { InfoFilled, Edit, Delete } from '@element-plus/icons-vue' 
  export default {
    name: "PersonView",
    components: { NavBar },
    setup() {
      // 当前激活的功能页面
     const activeComponent = ref("info")
  const router = useRouter()
  const route = useRoute()
  const deletedata= reactive({})
  const total = ref(0)
  const tableData = ref([
    {
      id: 1,
      address: '北京市朝阳区XXX街道',
      createTime: '2025-03-01T10:00:00',
      floor: 5,
      imagePath: 'https://via.placeholder.com/100',
      layout: '3室2厅',
      state: '已审核',
      updateTime: '2025-03-03T12:30:00',
      wantMoney: '100000',
    },
    {
      id: 2,
      address: '上海市浦东新区YYY路',
      createTime: '2025-03-02T11:15:00',
      floor: 8,
      imagePath: 'https://via.placeholder.com/100',
      layout: '2室1厅',
      state: '待审核',
      updateTime: '2025-03-04T09:20:00',
      wantMoney: '80000',
    },
    {
      id: 3,
      address: '广州市天河区ZZZ大街',
      createTime: '2025-03-03T12:00:00',
      floor: 2,
      imagePath: 'https://via.placeholder.com/100',
      layout: '4室2厅',
      state: '已完成',
      updateTime: '2025-03-05T14:40:00',
      wantMoney: '120000',
    },
  ])
  
  const activeName = ref('1')
  
      // 假数据：帖子列表
      const posts = ref([
        { id: 1, title: "帖子标题1", content: "这是帖子内容1，展示一些描述信息。" },
        { id: 2, title: "帖子标题2", content: "这是帖子内容2，展示一些描述信息。" },
      ])
  
      // 假数据：收藏列表
      const favorites = ref([
        { id: 1, title: "收藏项目1" },
        { id: 2, title: "收藏项目2" },
        { id: 3, title: "收藏项目3" },
      ])
  
      // 模拟的用户数据
      const user =ref({
        avatar: '/favicon.ico',
        name: '司徒山薇',
        level: 6,
        person: {
          birthday: '',
          signature: '',
          gender: '',
          email: 'example@example.com',
          phone: '12345678901',
        },
        password: {
          old: '',
          new: ''
        },
        exp: 3498,      // 当前经验值
        nextExp: 28800, // 下一等级所需经验
        coin: 574.4,    // 硬币数量
     
        bio: '这里是个人简介，介绍一下自己。'
      })
  
      // 每日奖励（假数据）
      const dailyTasks = ref([
    { title: '每日签到', exp: 5, icon: 'fas fa-check-circle' },
    { title: '浏览5个帖子', exp: 10, icon: 'fas fa-eye' },
    { title: '每日评论', exp: 5, icon: 'fas fa-comment' },
    { title: '发表游记', exp: 5, icon: 'fas fa-pencil-alt' },
  ])
  
      // 成就勋章（假数据）
      const medals = ref([
        { name: '收藏勋章', icon: 'https://example.com/medal1.png' },
        { name: '分享达人', icon: 'https://example.com/medal2.png' },
      ])
  
      // 计算经验条百分比
      const expPercent = computed(() => {
        return ((user.value.exp / user.value.nextExp) * 100).toFixed(2)
      })
     /*帖子审核*/
  // 确认删除事件处理
  // const confirmDelete = (id) => {
  //   console.log("确认删除操作，ID:", id);
  //    deletedata.id =id;
  //   deleteOrderById(deletedata).then((res) =>{
  //     ElMessage({
  //                     message: res.data,
  //                     type: 'success',
  //                 })
      
  //    });
  //    HandleQueryPage();
  // }
  
  // // 取消删除事件处理
  // const cancelDelete = () => {
  //   console.log("取消删除操作");
  // }
  
  const getTagType = (state) => {
      if (state === '已通过') {
          return 'success'; // 绿色
      } else if (state === '已拒绝') {
          return 'danger'; // 红色
      } else {
          return 'primary'; // 默认颜色
      }
  };
  // 格式化日期方法
  const formatDate = (dateStr) => {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };
      // 编辑信息相关
     // 创建 `editUser`，用于表单编辑
  const editUser = reactive({
    name: user.value.name,
    email: user.value.person.email,
    phone: user.value.person.phone,
    bio: user.value.bio,
    avatar:user.value.avatar,
    birthday: user.value.person.birthday,
    signature: user.value.person.signature,
    gender: user.value.person.gender,
    passwordOld: '',
    passwordNew: ''
  });
  // 保存修改的方法
  const saveChanges = () => {
    // 更新 user 数据
  
    user.value.name = editUser.name;
    user.value.person.email = editUser.email;
    user.value.person.phone = editUser.phone;
    user.value.bio = editUser.bio;
    user.value.person.birthday = editUser.birthday;
    user.value.person.signature = editUser.signature;
    user.value.person.gender = editUser.gender;
  
    // 处理密码修改（如果填写了）
    if (editUser.passwordOld && editUser.passwordNew) {
      user.value.password.old = editUser.passwordOld;
      user.value.password.new = editUser.passwordNew;
    }
  
    console.log('修改成功', user);
  };
      // 取消编辑
      const cancelEdit = () => {
    // 更新 user 数据
    
  };
  const showEditForm = () => {
    // 更新 user 数据
    
  };
      return {
        activeComponent,
        posts,
        tableData,
        getTagType,
        formatDate,
        favorites,
        user,
        dailyTasks,
        medals,
        expPercent,
        showEditForm,
        editUser,
        saveChanges,
        cancelEdit
      }
    }
  }
  </script>
  
  <style scoped>
  /* ======= 整体页面背景和字体 ======= */
  .person-view {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: #f9f9f9;
    color: #333;
    min-height: 100vh;
  }
  
  /* ======= 个人中心主体区域，左右布局 ======= */
  .person-container {
    display: flex;
    max-width: 1200px;
    margin: 20px auto;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
  }
  
  /* ======= 左侧菜单 ======= */
  .sidebar {
    width: 200px;
    border-right: 1px solid #eaeaea;
    background-color: #f7f7f7;
  }
  
  .sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .sidebar li {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  .sidebar li:hover {
    background-color: #e0e0e0;
  }
  
  .sidebar li.active {
    background-color: #00a1d6;
    color: #fff;
  }
  
  /* ======= 右侧内容区 ======= */
  .content {
    flex: 1;
    padding: 16px;
  }
  
  /* ======= 帖子和收藏列表样式 ======= */
  .post-item {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eaeaea;
  }
  
  .fav-item {
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
  }
  
  /* --------------------------------------
     以下是“个人信息”区域的样式
  --------------------------------------- */
  .personal-info {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
  }
  
  /* ===== 顶部信息区 ===== */
  .profile-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
  /* 头像 */
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-right: 16px;
    object-fit: cover;
  }
  
  /* 用户信息 */
  .info {
    flex: 1;
  }
  
  .name-level {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  
  .name-level h2 {
    margin: 0;
    font-size: 24px;
  }
  
  .level {
    background-color: #fb7299; /* 粉色徽章 */
    color: #fff;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 14px;
  }
  
  /* 经验条 */
  .exp-bar {
    margin-top: 8px;
  }
  
  .exp-text {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 2px;
  }
  
  .coin {
    color: #ff9500;
  }
  
  .bar-container {
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
  }
  
  .bar-fill {
    height: 100%;
    background-color: #00a1d6; /* 进度条颜色 */
  }
  
  /* ===== 编辑个人信息 ===== */
  .actions {
    margin-bottom: 16px;
  }
  
  .edit-form {
    background-color: #f5f5f5;
    padding: 16px;
    margin-bottom: 16px;
    border-radius: 6px;
  }
  
  .edit-form label {
    display: block;
    margin: 8px 0;
  }
  
  .edit-form input,
  .edit-form textarea {
    width: 100%;
    padding: 6px;
    box-sizing: border-box;
  }
  
  .edit-form button {
    margin-right: 8px;
    padding: 6px 12px;
  }
  
  /* ===== 每日奖励 ===== */
  .daily-rewards {
    margin-bottom: 16px;
  }
  
  .daily-rewards h3 {
    margin-bottom: 12px;
  }
  
  .daily-rewards ul {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
  }
  
  .daily-rewards li {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 16px;
    width: 100px;
    text-align: center;
  }
  
  .daily-rewards .exp-gain {
    color: #00a1d6;
    margin-top: 4px;
  }
  
  /* ===== 成就勋章 ===== */
  .achievements h3 {
    margin-bottom: 12px;
  }
  
  .achievements ul {
    display: flex;
    gap: 16px;
    list-style: none;
    padding: 0;
  }
  
  .achievements li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
  }
  
  .achievements img {
    width: 40px;
    height: 40px;
    margin-bottom: 4px;
  }
  
  .account-security {
    margin-top: 20px;
  }
  
  .account-security h3 {
    margin-bottom: 16px;
  }
  
  .account-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .account-card {
    flex: 1 1 calc(50% - 16px); /* 每行显示2个卡片，考虑到间隙 */
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .account-card:hover {
    transform: scale(1.02);
  }
  
  .card-content {
    display: flex;
    align-items: center;
  }
  
  .card-icon {
    font-size: 24px;
    margin-right: 12px;
    color: #00a1d6;
  }
  
  .card-info {
    display: flex;
    flex-direction: column;
  }
  
  .card-title {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 4px;
  }
  
  .card-value {
    font-size: 14px;
    color: #666;
  }
  /* 区块容器 */
  .section {
    margin-bottom: 16px;
  }
  
  /* 标题行 */
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .header-icon {
    font-size: 20px;
    color: #00a1d6;
    margin-right: 8px;
  }
  
  .header-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }
  
  /* 分割线 */
  .divider {
    height: 1px;
    background-color: #eaeaea;
    margin: 16px 0;
  }
  
  /* 如果需要，也可以调整每日奖励和成就勋章的列表样式 */
  .daily-rewards-list,
  .achievements-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .daily-rewards-list li,
  .achievements-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  /*这是信息修改界面的css*/
  /* General styles for the form */
  .account-settings {
    max-width: 600px;
    margin: 30px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Title styling */
  .account-settings h2 {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
  }
  
  /* Form styling */
  .el-form {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Label styling */
  .el-form-item {
    margin-bottom: 15px;
  }
  
  /* Input field styling */
  .el-input,
  .el-date-picker {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
  }
  
  /* Input focus styling */
  .el-input:focus,
  .el-date-picker:focus {
    border-color: #409EFF;
  }
  
  /* Placeholder styling */
  .el-input::placeholder {
    color: #999;
  }
  
  /* Button styling */
  .el-button {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
    /* background-color: #409EFF; */
    color: white;
    border: none;
    transition: background-color 0.3s ease;
  }
  
  /* Button hover effect */
  .el-button:hover {
    background-color: #66b1ff;
  }
  
  /* Radio group styling */
  .el-radio-group {
    display: flex;
    justify-content: space-around;
    margin-top: 10px;
  }
  
  .el-radio {
    font-size: 14px;
  }
  
  .el-radio + .el-radio {
    margin-left: 15px;
  }
  
  /* Specific form item spacing */
  .el-form-item label {
    font-size: 14px;
    color: #555;
    font-weight: 500;
  }
  
  .avatar-uploader {
    display: flex;
    align-items: center;
  }
  
  .avatar-uploader .avatar {
    width: 50px;
    height: 50px;
    margin-top: 10px;
    border-radius: 50%;
  }
  /*帖子审核*/
  /* demo-collapse {
    margin: 20px;
  } */
  
  .order-title {
    display: flex;
    align-items: center;
    justify-content: center; /* 让所有内容在列中居中 */
    width: 100%;
    padding: 0; 
    margin: 0;
  }
  
  .state-tag {
    margin-left: 10px;
    margin-right: auto;
    /* 使标签在列中垂直居中 */
    display: inline-block;
    vertical-align: middle;
    line-height: 1.5; /* 调整行高来控制文本的垂直位置 */
    padding-top: 2px; /* 通过增加顶部内边距来向下移动文本 */
  }
  
  .header-icon {
    margin-left: 0px; /* 仅稍微增加一点间距 */
    padding: 0; /* 移除所有填充 */
    vertical-align: middle;
  }
  
  .el-button {
    padding: 0;
    margin-left: 10px;
    vertical-align: middle;
  }
  
  .el-descriptions__label {
    font-weight: bold; /* 加粗标签文字 */
    color: #409EFF; /* 更改标签文字颜色 */
  }
  
  .el-descriptions__item {
    padding: 8px 0; /* 增加每个描述项的上下内边距 */
  }
  </style>
  